<template>
    <div class="questionBankData">
        <el-card style="margin-top: 20px;">
            <el-table :data="questionData" max-height="450"  
            style="width: 100%;"
            :header-cell-style="{ 'background':'#eef1f6', 'fontWeight': 'bold' ,color:'#606266'}" 
            :default-sort="{ prop: 'id', order: 'ascending' }">
                <el-table-column prop="id" label="编号" sortable align="center"/>
                <el-table-column prop="title" label="标题名称"  width="300"/>
                <el-table-column prop="type" label="题目类型"  align="center" width="150"/>
                <el-table-column prop="course" label="课程" align="center"  width="150"/>
                <el-table-column prop="chapter" label="章节" align="center" width="150"/>
                <el-table-column prop="knowledgePoint" label="知识点" align="center" width="150">
                    <template #default="scope">
                        <el-tag>
                            {{ scope.row.knowledgePoint }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="difficulty" label="难度" align="center" sortable width="130">
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.difficulty)">
                            {{ scope.row. difficulty}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="questionStem" v-if="false" label="题干" align="center" width="130"></el-table-column>
                <el-table-column prop="question" v-if="false" label="问题" align="center" width="130"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120" align="center">
                    <template #default="scope">
                        <el-button @click="strQuestion(scope.$index, scope.row)" type="text" style="margin-left: 5px;"> 
                            开始做题
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <Pagination ref="questionBanPagination"
                style="margin-top: 20px; display: flex; justify-content: center;"
                v-model:currentPage="currentPage"
                v-model:pageSize="pageSize" 
                v-model:total="total"
                @updateData="(courrentPage, pageSize)=>{ console.log('更新数据\n当前页码：' + courrentPage, '每页条数：' + pageSize) }"
            />
    </div>
</template>

<script lang="ts" setup name="questionBankData">
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入 useRouter
import Pagination from '@/components/Pagination.vue';
import { useQuestionBankDataStore } from '@/store/modules/questionBank/questionbankdata.ts'
    const questionStore = useQuestionBankDataStore();   
    // 使用 useRouter 获取 router 实例
    const router = useRouter();
    //分页数据
    const questionBanPagination =ref();
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(100);

    // 题库数据
    const questionData = ref([
        { id: 1000, type: '简答题', title: '两数之和',
        questionStem: '给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。',
        question: '(1).输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。<br>(2).问题二输入：nums = [3,2,4], target = 6输出：1,2]<br>(3).问题三输入：nums = [3,3], target = 6输出：[0,1]', 
        course: '数组', knowledgePoint: '哈希表', chapter: '第三章', difficulty: '简单' },
        { id: 1001, type: '简答题', title:'指针和数组', questionStem: "解释C语言中指针和数组的关系，并给出一个例子说明如何通过指针访问数组元素。",
        question: '请描述指针和数组在C语言中的关系，并提供一个代码示例，展示如何使用指针来访问一个整型数组的元素。', course: 'C语言基础', knowledgePoint: '指针', chapter: '第二章', difficulty: '简单' },
        { id: 1002, type: '简答题', title: '结构体的使用',questionStem: '结构体在C语言中扮演什么角色？请提供一个包含至少两个成员的结构体定义，并说明如何创建和使用该结构体。'
        ,question: '描述结构体在C语言中的作用，并定义一个名为Student的结构体，包含name和age两个成员。然后编写代码展示如何创建一个Student类型的变量，并初始化它的值。',
         course: 'C语言进阶', knowledgePoint: '结构体', chapter: '第四章', difficulty: '中等' },
        { id: 1003, type: '简答题', title: '函数的参数传递',questionStem: '在C语言中，函数参数传递有哪些方式？请解释它们之间的区别，并给出每种方式的代码示例。'
        ,question: '请说明C语言中函数参数的传递方式，包括值传递、指针传递和引用传递，并解释它们之间的区别。对于每种传递方式，请提供一个简单的函数和调用该函数的代码示例。'
        , course: 'C语言函数', knowledgePoint: '函数', chapter: '第五章', difficulty: '中等' },
        { id: 1004, type: '简答题', title: '文件操作',questionStem: '在C语言中，如何实现文件的打开、读取、写入和关闭操作？请提供相应的函数和代码示例。'
        ,question: '描述在C语言中如何使用标准库函数来实现文件的基本操作，包括打开文件、读取文件内容、写入文件和关闭文件。请为每个操作提供一个代码示例。'
        , course: 'C语言文件操作', knowledgePoint: '文件I/O', chapter: '第六章', difficulty: '中等' },
        { id: 1005, type: '简答题', title: '动态内存分配',questionStem: '"C语言中如何进行动态内存分配和释放？请解释malloc和free函数的用法。'
        ,question: '请解释C语言中动态内存分配的概念，并说明如何使用malloc函数进行内存分配以及如何使用free函数释放内存。请提供malloc和free函数的使用示例。'
        , course: 'C语言内存管理', knowledgePoint: '动态内存分配', chapter: '第七章', difficulty: '中等' },
        { id: 1006, type: '简答题', title: '递归函数的实现',questionStem: '递归函数在C语言中如何实现？请解释递归的基本原理，并提供一个递归函数的代码示例。'
        ,question: '请描述递归函数的基本概念和工作原理，并提供一个实现计算阶乘的递归函数的代码示例。同时，请解释如何避免递归过程中可能出现的栈溢出问题。'
        , course: 'C语言高级编程', knowledgePoint: '递归', chapter: '第八章', difficulty: '困难' },
        { id: 1007, type: '简答题', title: '位操作',questionStem: '位操作在C语言中有哪些应用？请解释位操作的基本逻辑，并提供一个使用位操作解决实际问题的代码示例。'
        ,question: '请解释位操作在C语言中的应用场景，包括但不限于位与、位或、位异或、位非、位左移和位右移等操作。提供一个使用位操作解决二进制表示中的问题的实际代码示例，例如：交换两个变量的值而不使用临时变量。'
        , course: 'C语言位操作', knowledgePoint: '位操作', chapter: '第九章', difficulty: '困难' },
        { id: 1008, type: '填空题', title: 'C语言中的宏定义',questionStem: '在C语言中，以下哪个预处理指令用于定义宏？' ,question: '在C语言中，以下哪个预处理指令用于定义宏？', 
        options:[ {"A": "#include"},{"B": "#define"},{"C": "#ifdef"},{"D": "#pragma"}],answer: "B",
        course: 'C语言预处理', knowledgePoint:  '宏定义', chapter: '第十章', difficulty: '中等' },
        { id: 1009, type: '填空题', title: 'C语言中的字符串操作', questionStem: '在C语言中，用于计算字符串长度的函数是 ______ 。',question: '在C语言中，用于计算字符串长度的函数是 ______ 。'
        ,course: 'C语言字符串', knowledgePoint: '字符串操作', chapter: '第十一章', difficulty: '中等' },
     ])

    // 根据 difficulty 返回不同类型的标签
    const getTagType = (difficulty: string): 'success' | 'primary' | 'danger' | 'warning' => {
      switch (difficulty) {
        case '简单':
          return 'success';  // green tag
        case '中等':
          return 'primary';     // blue tag
        case '易错':
          return 'danger';   // red tag
        default:
          return 'warning';  // default tag
      }
    }

    // 点击开始做题按钮
    const strQuestion = (index: number, row: any) => {
        // console.log(row);
        console.log(router);
        // 存储题库数据
        questionStore.setQuestionBankData({
            id: row.id,
            type: row.type,
            title: row.title,
            difficulty: row.difficulty,
            knowledgePoint: row.knowledgePoint,
            chapter: row.chapter,
            course: row.course,
            questionStem: row.questionStem,
            question: row.question,
        });
        // 指定要跳转到的子路由
        router.push({
            name: 'questionBankDetails',  
            // 传递 id 参数到路由
            params: { id: row.id,}
        });
        
    }

</script>
